<template>
	<view class="wp">
		<view class="shu_title">
			<view class="span"></view>
			<text>选择预定金额</text>
		</view>
		<view class="money_list">
			<view class="item">
				<view class="con on">2000 <text>元</text></view>
			</view>
			<view class="item">
				<view class="con">10000 <text>元</text></view>
			</view>
		</view>
		<view class="pay_mode">
			<view class="shu_title">
				<view class="span"></view>
				<text>选择支付方式</text>
			</view>
			
			<view class="pay">
				<view class="w_change">
					<view class="apply_item chose_item on">
						<view class="left">
							<image mode="widthFix" src="../../static/images/pay1.png"></image>
							<text class="span">微信支付</text>
						</view>
					</view>
					<view class="apply_item chose_item" >
						<view class="left">
							<image mode="widthFix" src="../../static/images/pay2.png"></image>
							<text class="span">余额支付</text>
						</view>
					</view>
					<view class="apply_item chose_item">
						<view class="left">
							<image mode="widthFix" src="../../static/images/pay3.png"></image>
							<text class="span">线下支付</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="web_food_btn">
			<view class="btn_text">
				<view class="p">应付：<text>2000.00</text></view>
				<view class="span">去付款</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			let that = this;
			
		},
		methods: {

		}
	}
</script>

<style scoped>
	.wp{padding-top: 30rpx;}
	.money_list{margin-left: -20rpx;overflow: hidden;margin-top: 30rpx;}
	.money_list .item{width: 50%;padding-left: 20rpx;float: left;}
	.money_list .item .con{background-color: #fff;border-radius: 8px;text-align: center;
		height: 100rpx;line-height: 96rpx;border: 1px solid #fff;font-size: 38rpx;color: #000;
	}
	.money_list .item .con.on{background-color: #ebf2ff;border: 1px solid #227fff;}
	.money_list .item .con text{font-size: 26rpx;}
	.pay_mode{margin-top: 30rpx;}
	
	.pay {
		margin-top: 30rpx;
	}
	
	.pay .w_change {
		background-color: #fff;
		padding: 10rpx 26rpx;
		border-radius: 8px;
	}
	
	.pay .w_change h3 {
		font-size: 32rpx;
		color: #000;
	}
	
	
	
	.w_change .apply_item{overflow: hidden;position: relative;height: 70rpx;
		margin: 20rpx 0;
	}
	.w_change .apply_item .left{position: absolute;left: 0;top:50%;transform: translateY(-50%);}
	.w_change .apply_item image{width:44rpx;vertical-align: middle;margin-right: 6px;}
	.w_change .apply_item .span{font-size: 11pt;color: #333;vertical-align: middle;margin-right: 6px;}
	
	
	.w_change .chose_item{background-image: url(@/static/images/my16.png);
		background-size: 18px;background-repeat: no-repeat;background-position: right center;
	}
	.w_change .chose_item.on{background-image: url('@/static/images/c_i11.png');}
	
</style>